[V0_FILE]typescriptreact:file="app/api/quote/route.ts" isMerged="true" import { NextResponse } from "next/server" // Array of inspirational quotes const quotes = [ { text: "The only way to do great work is to love what you do.", author: "Steve Jobs", }, { text: "Life is what happens when you're busy making other plans.", author: "John Lennon", }, { text: "Be the change that you wish to see in the world.", author: "Mahatma Gandhi", }, { text: "In the middle of difficulty lies opportunity.", author: "Albert Einstein", }, { text: "The future belongs to those who believe in the beauty of their dreams.", author: "Eleanor Roosevelt", }, { text: "Success is not final, failure is not fatal: It is the courage to continue that counts.", author: "Winston Churchill", }, { text: "It does not matter how slowly you go as long as you do not stop.", author: "Confucius", }, { text: "The best time to plant a tree was 20 years ago. The second best time is now.", author: "Chinese Proverb", }, { text: "Your time is limited, don't waste it living someone else's life.", author: "Steve Jobs", }, { text: "Believe you can and you're halfway there.", author: "Theodore Roosevelt", }, ] export async function GET() { // Get a random quote from the array const randomIndex = Math.floor(Math.random() * quotes.length) const randomQuote = quotes[randomIndex] // Return the quote as JSON return NextResponse.json(randomQuote) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useCallback } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter } from "@/components/ui/card" import type { Quote } from "@/lib/types" import { Sparkles } from "lucide-react" export default function Home() { const [quote, setQuote] = useState(null) const [isLoading, setIsLoading] = useState(false) const [rotation] = useState(() => Math.random() * 2 - 1) // Random slight rotation between -1 and 1 degrees const fetchQuote = useCallback(async () => { setIsLoading(true) try { const response = await fetch("/api/quote") const data = await response.json() setQuote(data) } catch (error) { console.error("Error fetching quote:", error) } finally { setIsLoading(false) } }, []) // Fetch a quote when the page loads useEffect(() => { fetchQuote() }, [fetchQuote]) return (

{quote ? (

"

{quote.text}

"

— {quote.author}

) : (

)}
Click the button for a dose of inspiration!

) } [V0_FILE]typescriptreact:file="lib/types.ts" export interface Quote { text: string author: string } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap"); .font-serif { font-family: "Playfair Display", serif; } /* Add a subtle paper texture to cards */ .card { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.05' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { Inter, Playfair_Display } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"], variable: "--font-inter" }) const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-playfair" }) export const metadata: Metadata = { title: "Inspirational Quotes", description: "Get inspired with beautiful random quotes", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isQuickEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/.{ts,tsx}", ".{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { fontFamily: { sans: ["var(--font-inter)"], serif: ["var(--font-playfair)"], }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], }

About

Tags

Share

More from lameckirungu

More Templates Like This

About

Tags

Share

About

Tags

Share

More from lameckirungu

More Templates Like This